<template>
  <sky-base-page ref="basePageRef" :api-obj="qly.api.user.gg_list"
                 type="data" refresherEnabled padding="0 0 12rpx">
    <template #default="{dataInfo}">
      <view class="customer-card" v-for="(item,index) in dataInfo" :key="index">
        <view class="card-row" @tap="add(item.id)">
          <up-avatar :src="item.img" shape="square" size="60"></up-avatar>
          <view class="content">
            <view>标题：{{ item.title }}</view>
            <view class="ggxx">广告信息：{{ item.content }}</view>
          </view>
        </view>
        <view class="edit-box">
          <up-icon name="edit-pen" color="#2979ff" size="28" @tap="add(item.id)"></up-icon>
          <up-icon name="trash" color="red" size="28" @tap="deleteHandler(item.id)"></up-icon>
        </view>
      </view>
      <qly-empty v-if="dataInfo.length === 0"/>
    </template>
    <template #footer>
      <up-button type="primary" text="新增广告" @tap="add(null)"></up-button>
    </template>
  </sky-base-page>
</template>
<script setup>
const basePageRef=ref()
const add = (id) => {
  uni.$on('editSwiperSuccess',()=>{
    basePageRef.value.refresh()
  })
  qly.page.open('/pages/my/advertisement/save', {id})
}

// 删除
const deleteHandler = async (id) => {
  const confirm = await qly.dialog.messageBox({
    title: '提示',
    message: '确定要删除吗？',
  })
  if (confirm) {
    const res = await qly.api.user.scgg({id})
    if (res.code === 1) {
      basePageRef.value.refresh()
      qly.dialog.success('删除成功')
    } else {
      qly.dialog.apiError(res).catch()
    }
  }

}
</script>
<style scoped lang="scss">
.customer-card {
  margin: 12rpx 24rpx;
  background: #fff;
  padding: 24rpx;
  border-radius: 12rpx;

  .card-row {
    display: flex;
    align-items: flex-start;
    line-height: 48rpx;
    gap: 16rpx;

    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .create_at {
        color: #909399;
      }
    }
  }
}

.edit-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24rpx;
}
</style>
